<template>
  <div class="recommend-book">
    <h4>每日听书</h4>
    <div class="recommend" v-for="item in recommend" @click="recommends(item.bookid)">
      <h5>主编推荐</h5>
      <img :src="URL + item.bookimg" alt="">
      <div>
        <h6>{{item.bookname}}</h6>
        <p>{{item.bookrecommend}}</p>
        <span>{{item.videoduration}} <b>￥{{item.bookoriginalprice}}</b></span>
      </div>
    </div>
    <h5>精选书单</h5>
    <div class="recommend-content"  @click="themeLists(n.themeid)">
      <img :src="URL + themeList.img">
      <div>
        <h6>{{themeList.title}}</h6>
        <p>{{themeList.contentabstract}}</p>
        <span>{{themeList.bookCount}}本书</span>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "recommend",
      props:['recommend','themeList'],
      data(){
          return{

          }
      },

      methods:{
        recommends(v){
          this.$router.push({name:'particulars',params:{'id':v}})
        },
        themeLists(v){
          console.log(v)
        }
      }
    }
</script>

<style scoped>
  .recommend-book>h4{
    margin-bottom: .1rem;
    font-weight: bold;


  }
  .recommend{
    padding: 0  0.08rem;
    font-size: .12rem;
    text-align: left;
    margin-bottom: .12rem;
  }
  .recommend img{
    height: 1.3rem;
    width: .9rem;
    float: left;
    margin-right: .1rem;
  }
  .recommend-book h5{
    width: 100%;
    text-align: left;
    color: #999;
    font-size: .12rem;
    padding-left: .15rem;
    height: .3rem;
    /*line-height: .3rem;*/
  }
  .recommend h6{
    font-size: .14rem;
    margin-bottom: .05rem;
  }
  .recommend p{
    height: .9rem;
  }
  .recommend span b{
    float: right;
    margin-right: .18rem;
    color: firebrick;
  }
  .recommend-content {
    height: .9rem;
    padding: 0 0.08rem;
  }
  .recommend-content img{
    float: left;
    height: 75px;
    width: 75px;
    margin-right: 10px;
  }
  .recommend-content div{
    float: left;
    text-align: left;
    width: calc(100% - 95px);
  }
  .recommend-content div h6{
    font-size: .14rem;
    height: .22rem;
    font-weight: bold;
  }
  .recommend-content div p{
    height: .34rem;
    font-size: .12rem;
    width: 100%;
  }
  .recommend-content div span{
    height: .15rem;
    line-height: .12rem;
    font-size: .12rem;
  }

</style>
